<template>
    <n-card>
        <header>
            <n-upload accept="image/*" color="#8590a6" :custom-request="customRequestTeam" list-type="image-card"
                :max="1" @before-upload="beforeAvatarUpload">
                战队LOGO
            </n-upload>
        </header>
        <main>
            <n-input-group>
                <img src="@/assets/images/asg-logo.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input :style="{ width: '70%' }" size="small" v-model:value="jsonObject.teamName" type="text"
                    placeholder="战队名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor1.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者1上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor2.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者2上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor3.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者3上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor4.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者4上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor5.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者5上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/survivor.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.survivor6.name" :style="{ width: '70%' }" type="text"
                    placeholder="求生者6上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/hunter.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.hunter1.name" :style="{ width: '70%' }" type="text"
                    placeholder="监管者1上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/hunter.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.hunter2.name" :style="{ width: '70%' }" type="text"
                    placeholder="监管者2上场名称" />
            </n-input-group>
            <n-input-group>
                <img src="@/assets/images/hunter.png" :style="{ width: '27px' }" class="aside_image" />
                <n-input size="small" v-model:value="jsonObject.hunter3.name" :style="{ width: '70%' }" type="text"
                    placeholder="监管者3上场名称" />
            </n-input-group>
        </main>
        <footer>
            <n-button @click="handleSave" size="small" type="info">保存战队信息文件</n-button>
        </footer>
    </n-card>
</template>

<script setup lang='ts'>
import { invoke } from '@tauri-apps/api/core';
import { UploadCustomRequestOptions, UploadFileInfo, useMessage } from 'naive-ui';
import { save } from '@tauri-apps/plugin-dialog';

const message = useMessage();
const jsonObject = reactive({
    logo: '',
    teamName: '',
    survivor1: {
        name: '',
        take: false
    },
    survivor2: {
        name: '',
        take: false
    },
    survivor3: {
        name: '',
        take: false
    },
    survivor4: {
        name: '',
        take: false
    },
    survivor5: {
        name: '',
        take: false
    },
    survivor6: {
        name: '',
        take: false
    },
    hunter1: {
        name: '',
        take: false
    },
    hunter2: {
        name: '',
        take: false
    },
    hunter3: {
        name: '',
        take: false
    }
});
// 头像上传
const beforeAvatarUpload = (options: {
    'file': UploadFileInfo
}) => {
    const { file } = options.file;
    if (!file) {
        return false;
    }
    if (file.size > 10 ** 6) {
        message.error('图片文件大小不能大于1MB');
        return false;
    }
    return true;
};
const customRequestTeam = ({ file }: UploadCustomRequestOptions) => {
    if (!file.file) {
        return;
    }
    const reader = new FileReader();
    reader.readAsDataURL(file.file);
    reader.addEventListener(
        'load',
        async (event) => {
            const result = event.target?.result;
            if (typeof result !== 'string') {
                return;
            }
            jsonObject.logo = result;
        }
    );
};
const handleSave = async () => {
    try {
        // 1. 弹出保存对话框让用户选择位置
        const filePath = await save({
            title: "保存JSON文件",
            defaultPath: `${jsonObject.teamName}战队信息.json`,
            filters: [{
                name: "JSON",
                extensions: ["json"]
            }]
        });

        if (!filePath) {
            return;
        }
        // 2. 调用Rust后端保存文件
        const result = await invoke<string>('export_to_json', {
            data: {
                data: jsonObject,
                file_path: filePath  // 传递用户选择的路径
            }
        });
        message.success('战队信息保存成功！');
        return result;
    } catch (error) {
        message.error('文件保存失败！');
        throw error;
    }
}
</script>
<style scoped lang='scss'>
header {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 6px 0;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;

    .aside_image {
        width: 27px;
        height: 27px;
        border: 1px solid rgb(224, 224, 230);
        background: #E7E7E7;
    }
}
</style>